<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Book Info</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>

<body>
    <ul>
        {% for item in bookInfo %}
        {# 等价于{% for item in bookInfo.object_list %} #}
        <li>{{ item.name }}-----{{item.price}}</li>
        {% endfor %}
    </ul>

    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <p>
                {% if bookInfo.has_previous %}
                <!-- 如果当前页还有上一页，显示一个上一页的按钮 -->
                <a href="?page={{ bookInfo.previous_page_number }}">上一页</a>
                {% endif %}
                <span>
                    <!-- 显示当前页面信息 -->
                    第 {{ bookInfo.number }} 页 / 共 {{ bookInfo.paginator.num_pages }} 页
                </span>
                {% if bookInfo.has_next %}
                <!-- 如果当前页还有上下页，显示一个下一页的按钮 -->
                <a href="?page={{ bookInfo.next_page_number }}">下一页</a>
                {% endif %}
            </p>
        </ul>
    </nav>
</body>

</html>